<template>
  <view class="content">
    <Navbar :title="title" />
    <view class="topBar">
      <view
        class="btn"
        v-for="item in btnText"
        :key="item.id"
        @click="selectId = item.id"
        :class="{ active: selectId === item.id }"
      >
        {{ item.name }}
      </view>
    </view>
    <scroll-view scroll-y class="main">
      <view class="bottom">
        <view class="item" v-for="item in newList" :key="item.upd_time">
          <img :src="item.goods_small_logo" />
          <view class="right">
            <view class="name">{{ item.goods_name }}</view>
            <view class="price">
              <text>￥</text>
              {{ item.goods_price }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getGoodsListAPI } from "@/api/goodsList";
export default {
  data() {
    return {
      btnText: [
        { name: "综合", id: 1 },
        { name: "销量", id: 2 },
        { name: "价格", id: 3 },
      ],
      title: "商品列表",
      list: [],
      selectId: 1,
    };
  },
  computed: {
    newList() {
      return this.list.filter((item) => {
        return item.goods_small_logo !== "";
      });
    },
  },
  onLoad({ id }) {
    this.getGoodsList(id);
  },
  methods: {
    async getGoodsList(id) {
      const { message } = await getGoodsListAPI(id);
      console.log(message);
      this.list = message.goods;
    },
  },
};
</script>

<style lang="scss">
.content {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  .topBar {
    display: flex;
    justify-content: space-evenly;
    width: 100vw;
    height: 88rpx;
    .btn {
      width: 184rpx;
      text-align: center;
      line-height: 88rpx;
      // background-color: pink;
    }
    .active {
      border-bottom: 2px solid #e6414e;
    }
  }
  .main {
    flex: 1;
    overflow: hidden;
    .bottom {
      flex: 1;
      width: 100vw;
      // background-color: skyblue;
      .item {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        height: 209rpx;
        // background-color: pink;
        img {
          width: 191rpx;
          height: 191rpx;
          // background-color: green;
        }
        .right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 436rpx;
          height: 156rpx;
          // background-color: chocolate;
          .name {
            font-size: 25rpx;
          }
          .price {
            font-size: 26rpx;
            color: #e6414e;
            text {
              font-size: 20rpx;
            }
          }
        }
      }
    }
  }
}
</style>
